<template>
  <div>
    <el-tree
      class="treeTable"
      :data="catelist"
      show-checkbox
      :columns="columns"
      :props="defaultProps"
      style="line-height: 40px; width: 200px"
    >
      <!-- 是否有效的模板列 -->
      <template slot="isok" slot-scope="scope">
        <i
          class="el-icon-success"
          v-if="scope.row.cat_deleted === false"
          style="color: lightgreen"
        ></i>
        <i class="el-icon-error" v-else style="color: lightgreen"></i>
      </template>
      <!-- 排序的模板列 -->
      <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1"
          >二级</el-tag
        >
        <el-tag type="warning" size="mini" v-else>三级</el-tag>
      </template>
      <!-- 操作的模板列。slot-scope="scope" -->
      <template slot="opt">
        <el-button type="primary" icon="el-icon-edit" size="mini"
          >编辑</el-button
        >
        <el-button type="danger" icon="el-icon-delete" size="mini"
          >删除</el-button
        >
      </template>
    </el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // banners: [
      //   "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F16%2F20210716150015_36c9e.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649231025&t=2a5a1ecd294e96b96141ff15a6f3668f",
      //   "https://img1.baidu.com/it/u=689104610,2593107097&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      //   "https://img1.baidu.com/it/u=3045913638,1201775923&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      // ],
      // swiperOption: {
      //   pagination: {
      //     el: ".swiper-pagination",
      //     autoplay: 1000,
      //   },
      //   // ...
      // },
      catelist: [],
      columns: [
        {
          label: "分类名称", // 列名
          prop: "cat_name", // 对应的数据名
        },
        {
          label: "是否有效",
          // 表示将当前列（是否有效列）定义为模板列
          type: "template",
          // 当前列的模板列名称
          template: "isok",
        },
        {
          label: "排序",
          // 表示将当前列 定义为模板列
          type: "template",
          // 当前列的模板列名称
          template: "order",
        },
        {
          label: "操作",
          // 表示将当前列 定义为模板列
          type: "template",
          // 当前列的模板列名称
          template: "opt",
        },
      ],
      defaultProps: {
        children: "children",
        label: "cat_name",
      },
    };
  },
  async mounted() {
    if (localStorage.getItem("userinfo")) {
      //侧边栏
      const { data } = await this.$axios.get("/categories");
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          message: data.meta.msg,
          type: "success",
        });
        this.catelist = data.data;
      } else {
        this.$message.error(data.meta.message);
      }
    }
  },
};
</script> 